<template>
	<main class="page van-safe-area-top">
		<div class="search-wrap">
			<van-search v-model="key" readonly shape="round" background="var(--body-bg-color)" placeholder="搜索商品/店铺"
						@click-input="to('/search/inputKey')" show-action>
				<template #left>
					<div class="logo"><img src="/img/logo.svg"/></div>
				</template>
				<template #action>
					<div class="locate"><van-icon name="location" /><span>合肥</span></div>
				</template>
			</van-search>
		</div>
		<HelloWorld msg="BBBBBBBB" />
		<p><router-link to="/goods/detail?gdsId=53214123">商品详情示例</router-link></p>
		<p><router-link to="/shop/home?shopId=ZBCU1322">店铺页示例</router-link></p>
		<div class="user-info">
			<p>Id:{{staffId}}</p>
			<p>类型: {{transUserType(staffType+'')}}</p>
			<p>省分: {{transProv(provinceCode)}}</p>
			<p>昵称: {{staffName}}</p>
			<p>头像: {{avatar}}</p>
			<p>电话: {{phoneNum}}</p>
			<p>这样写也响应: {{myNick}}</p>
			<p>这样写也响应: {{storeUser.staffName}}</p>
			<p>这样写也响应: {{storeUser.$state.staffName}}</p>
		</div>
		<div>
			<van-button @click="changePhone">更改昵称页面及时更新，主要是因为使用了storeToRefs</van-button>
			<van-button @click="noopLink">noop</van-button>
		</div>
		<van-back-top class="app-back-top" teleport=".app-photo"><i class="iconfont">&#xe61a;</i></van-back-top>
	</main>
</template>
<style lang="scss" scoped>
.page{
	padding-bottom:calc(50px + env(safe-area-inset-bottom));
	.search-wrap{height:calc(48px + env(safe-area-inset-top)); width:100%; background:var(--body-bg-color);}
	.van-search{padding:6px 2px 6px 10px;width:100%;height:calc(48px + env(safe-area-inset-top)); position:fixed;top:0;left:0;z-index:3;}
	:deep(.van-search__content){border:1px solid var(--van-primary-color);background:var(--white-color);}
	.locate{
		text-align:center;line-height:1;
		.van-icon{color:var(--van-primary-color);width:100%;display:block;font-size:18px;}
		&>span{font-size:12px}
	}
}
.logo {
	margin-right:10px;
	&>img{height:34px;width:auto;}
}
.user-info{
	margin:16px;
	padding-bottom: 16px;
}
</style>
<script setup lang="ts">
defineOptions({name:'home'})
const {storeUser} = useStore()  //从store工厂中取出要指定使用的若干个状态数据
const {staffId,staffType,provinceCode,staffName,avatar,phoneNum,} =storeToRefs(storeUser) //取出要本次使用的状态数据，这种方式能支持状态数据在页面上响应式变更展示
//直接调用状态管理中的方法，异步读取服务端(mock)数据
storeUser.getUserInfo().then((res:any)=>{
	console.log(res)
}).catch((e:any)=>{
	console.log(e)
})
const { transProv,transUserType} =useKV()
const changePhone=()=>{
	storeUser.staffName = "小猪课堂";
}

const myNick=computed(()=>{
	return storeUser.staffName
})
const noopLink=()=>{
	apiUser.noop().then((res:any)=>{
		console.log(res)
	}).catch((e:any)=>{
		console.log('error',e)
	})
}

//data
const key=ref('')

//methods
const {to} =useGoto()
</script>